<template>
  <!-- 使用Element Plus的el-image组件来展示图片 -->
  <el-image :src="imageUrl"></el-image>
</template>

<script setup>
import { computed } from "vue";
// 使用defineProps定义props函数，它接受一个对象，对象的键是props的名称，值是它们的类型
const props = defineProps({
  src: String, // 定义一个名为src的prop，类型为字符串
});

// 使用computed创建一个计算属性imageUrl
const imageUrl = computed(() => {
  // 如果props.src存在，则拼接环境变量和图片路径
  if (props.src) {
    return import.meta.env.VITE_API_HOST + props.src;
  }
  // 如果props.src不存在，则返回空字符串
  return "";
});
</script>

<style lang="scss" scoped></style>